<!--
 * @Author: lee
 * @Date: 2024-01-19 09:52:18
 * @LastEditors: lee
 * @LastEditTime: 2024-01-31 19:05:45
 * @Description: file content
-->
<script setup>
import { ref, onMounted, watchEffect, watch, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  id: {
    type: String,
    default: "chart"
  },
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "100%"
  },
  option: {
    type: Object,
    default: () => ({})
  }
});

let myChart = null;
const view = ref(null);
onMounted(() => {
  nextTick(() => {
    myChart = echarts.init(view.value);
    myChart.setOption(props.option, true);
    window.addEventListener("resize", myChart.resize);
  });
});
onUnmounted(() => {
  window.removeEventListener("resize", myChart.resize);
});
watch(
  () => props.option,
  (nv, ov) => {
    myChart?.setOption(props.option, false);
  },
  { deep: true }
);
// watchEffect(() => {
//   console.log('watch option--',props.option);
//   myChart?.setOption(props.option, false);
// });
</script>

<template>
  <div class="chart-render-box">
    <div :id="props.id" ref="view" :style="{ height: height, width: width }"></div>
  </div>
</template>
<style scoped lang="scss">
.chart-render-box {
  height: 100%;
}
</style>
